<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>前台首页</title>
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <link href="${css}/bootstrap.css" type="text/css" rel="stylesheet" media="all">
    <link href="${css}/style2.css" type="text/css" rel="stylesheet" media="all">
    <script src="${js}/jquery.js"></script>
    <script type="text/javascript" src="${js}/bootstrap-3.1.1.min.js"></script>
    <script src="${js}/simpleCart.min.js"> </script>
    <script src="${root}/resource/layer/layer.js"></script>
</head>
<body>
<%--消息--%>
<div id="div_3" style="position: absolute; display: none;z-index: 8;">
    <h2 id="message"></h2>
</div>
<%--消息--%>
<script src="${js}/mc.js"></script>
<%--Login--%>
<!--header-->
<div class="header">
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <h1 class="navbar-brand"><a  href="#">My-BookStore</a></h1>
            </div>
            <!--navbar-header-->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="${root}/user/front/indexView" class="active">首页</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">类型<b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column">
                            <li><a class="list" href="${root}/book/front/list">全部</a></li>
                            <c:forEach items="${categorys}" var="category">
                                <li><a class="list" href="${root}/book/front/list?cid=${category.cid}" name="${category.cid}">${category.cname}</a></li>
                            </c:forEach>
                        </ul>
                    </li>
                    <li class="dropdown grid">
                        <a href="${root}/user/front/userinfo" class="list1" >个人中心</a>
                    </li>
                    <li class="dropdown grid">
                        <a href="${root}/user/front/cart" class="list1">购物车</a>
                    </li>
                    <li class="dropdown grid">
                        <a href="${root}/orders/user/orderList" class="list1">订单</a>
                    </li>
                </ul>
                <!--/.navbar-collapse-->
            </div>
            <!--//navbar-header-->
        </nav>
        <div class="header-info">
            <div class="header-right login" id="login-div">
                <a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
                <c:if test="${not empty userLogin}">
                    <div id="loginBox">
                        <form id="loginForm" style="padding: 10px 10px">
                            <h4>用户名:${userLogin.username}</h4>
                            <button class="btn btn-info"><a href="#">个人中心</a></button><br/>
                            <button id="btn5" class="btn btn-danger">退出登录</button><br/>
                        </form>
                    </div>
                </c:if>
            </div>
            <div class="header-right cart" id="cart-div">
                <a href="${root}/user/front/cart"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a>
            </div>
        </div>
        <script>
            $(function () {
                $("#btn5").click(function () {
                    $.ajax({
                        url:"${root}/user/front/return",
                        type:"get",
                        success:function (response) {
                            if (response.result==200){
                                showInfo();
                                $("#message").text("退出成功！");
                                setTimeout(function () {
                                    hideInfo();
                                    $("#message").text("");
                                    location.href("${root}/user/front/indexView");
                                },3000);
                            }
                        }
                    })
                });
            })
        </script>
    </div>
</div>
<!--//header-->
<div class="jumbotron">
    <div  class="container-fluid">
        <div  class="row">
            <div style="float: left;" class="col-md-3">
                <h2 style="margin: 10px 10px;background-color: coral;border-radius:10px;color:indianred;">确认订单</h2>
            </div>
            <div style="float: left;" class="col-md-1">
                <h2 style="margin: 10px 10px;"><img src="${images}/arrow.png" style="height: 50px;width: 50px;"></h2>
            </div>
            <div style="float: left;" class="col-md-3">
                <h2 style="margin: 10px 10px;background-color: coral;border-radius:10px;color:whitesmoke;">提交订单</h2>
            </div>
            <div style="float: left;" class="col-md-1">
                <h2 style="margin: 10px 10px;"><img src="${images}/arrow.png" style="height: 50px;width: 50px;"></h2>
            </div>
            <div style="float: left;" class="col-md-3">
                <h2 style="margin: 10px 10px;background-color: coral;border-radius:10px;color:whitesmoke;">付款成功</h2>
            </div>
        </div>
        <div  class="row">
            <div style="margin: 5px 5px;">
                <p style="margin: 5px 5px;">收货地址：</p>
                <div style="margin: 5px 5px;height:50px;">
                    <span id="location" style="float: left;line-height: 50px;"></span><a href="${root}/user/front/address" style="float: right;line-height: 50px;"><img src="${images}/setting-filling.png" style="height: 50px;width: 50px;"></a>
                </div>
            </div>
        </div>
        <script>
            $(function () {
                $.ajax({
                   url:"${root}/address/findOne",
                   type:"post",
                   data:{"uid":"${userLogin.uid}"},
                   dataType:"json",
                   success:function (response) {
                        if (response.code==200){
                            if (response.data.id==null||response.data.id==0){
                                $("#location").text("没有默认地址，请设置默认收货地址！");
                            }else{
                                $("#location").text(response.data.receiver+"     "+response.data.phone+"     "+response.data.province+"省"+response.data.city+"市"+response.data.area+"区(县)   "+response.data.address);
                            }
                        }else {
                            $("#location").text(response.message);
                        }
                   }
                });
            })
        </script>
        <c:forEach items="${cart.map}" var="data">
            <div style="border-top: 1px solid black;border-bottom: 1px solid black; margin: 5px 5px;" class="row">
                <div style="float: left;height: 100px;" class="col-md-1">
                    <img src="${images}/${data.value.book.photo}" style="width: 70px;height: 100px;">
                </div>
                <div style="float: left;height: 100px;" class="col-md-11">
                    <p style="margin: 10px 10px;">[${data.value.book.publisher}]${data.value.book.title}</p>
                    <p style="margin: 10px 10px;">
                    <div style="float: left;">小结:<span id="span1-${data.key}">$<fmt:formatNumber value="${data.value.book.bprice*data.value.num}" type="number" maxFractionDigits="2"/></span></div>
                    <div style="float: right;">
                        <button class="sub-${data.key}">-</button><input class="input-${data.key}" size="3" value="${data.value.num}" type="text"/><button class="add-${data.key}">+</button>
                    </div>
                    </p>
                </div>
                <script>
                    $(function () {
                        $('.sub-${data.key}').click(function () {
                            if ($(this).next().val()>1){
                                let value =  parseInt($(this).next().val()-1);
                                $(this).next().val(value);
                                let number = $(this).next().val();
                                $.ajax({
                                    url:"${root}/shop/changeNum",
                                    data:{"bid":"${data.key}","num":number},
                                    type:"post",
                                    dataType:"json",
                                    success: function (response) {
                                        if (response.code==200){
                                            let val = parseFloat(number*${data.value.book.bprice});
                                            $("#span1-${data.key}").text('$'+val);
                                            $("#total").text('$'+response.data.total);
                                        }
                                    }
                                })
                            }
                        });
                        $('.add-${data.key}').click(function () {
                            let value = parseInt($(this).prev().val())+1;
                            $(this).prev().val(value);
                            let number = $(this).prev().val();
                            $.ajax({
                                url:"${root}/shop/changeNum",
                                data:{"bid":"${data.key}","num":number},
                                type:"post",
                                dataType:"json",
                                success: function (response) {
                                    if (response.code==200){
                                        let val = parseFloat(number*${data.value.book.bprice});
                                        $("#span1-${data.key}").text('$'+val);
                                        $("#total").text('$'+response.data.total);
                                    }
                                }
                            })
                        });
                        $('.input-${data.key}').change(function () {
                            let number = $(this).val();
                            if (number>=1){
                                $.ajax({
                                    url:"${root}/shop/changeNum",
                                    data:{"bid":"${data.key}","num":number},
                                    type:"post",
                                    dataType:"json",
                                    success: function (response) {
                                        if (response.code==200){
                                            let val = parseFloat(number*${data.value.book.bprice});
                                            $("#span1-${data.key}").text('$'+val);
                                            $("#total").text('$'+response.data.total);
                                        }
                                    }
                                })
                            }else{
                                $(this).val(1);
                                $.ajax({
                                    url:"${root}/shop/changeNum",
                                    data:{"bid":"${data.key}","num":1},
                                    type:"post",
                                    dataType:"json",
                                    success: function (response) {
                                        if (response.code==200){
                                            let val = parseFloat(1*${data.value.book.bprice});
                                            $("#span1-${data.key}").text('$'+val);
                                            $("#total").text('$'+response.data.total);
                                        }
                                    }
                                })
                            }
                        });
                    });
                </script>
            </div>
        </c:forEach>
        <div style="margin: 5px 5px;" class="row">
            <div style="float: right"><span style="margin: 5px 5px;">实付款:<span id="total">$<fmt:formatNumber value="${cart.total}" type="number" maxFractionDigits="2"/></span></span><button style="margin: 5px 5px;" type="button" class="btn-danger"><a href="${root}/orders/user/submitOrder">提交订单</a></button></div>
        </div>

    </div>
</div>
<!--footer-->
<div class="footer">
    <div class="container">
        <div class="footer-grids">
            <div class="col-md-2 footer-grid">
                <h4>公司</h4>
                <ul>
                    <li><a href="#">工作地点</a></li>
                    <li><a href="#">团队</a></li>
                    <li><a href="#">事件</a></li>
                    <li><a href="#">经销商</a></li>
                </ul>
            </div>
            <div class="col-md-2 footer-grid">
                <h4>业务</h4>
                <ul>
                    <li><a href="#">赞助</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">担保</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </div>
            <div class="col-md-3 footer-grid">
                <h4>订单 & 退货</h4>
                <ul>
                    <li><a href="#">订单状态</a></li>
                    <li><a href="#">配送方式</a></li>
                    <li><a href="#">退换货说明</a></li>
                    <li><a href="#">电子卡片</a></li>
                </ul>
            </div>
            <div class="col-md-2 footer-grid">
                <h4>法律</h4>
                <ul>
                    <li><a href="#">隐私</a></li>
                    <li><a href="#">条款和条件</a></li>
                    <li><a href="#">社会责任</a></li>
                </ul>
            </div>
            <div class="col-md-3 footer-grid icons">
                <h4>与我们联系</h4>
                <ul>
                    <li><a href="#"><img src="${images}/i1.jpg" alt=""/>在Wechat上关注我们</a></li>
                    <li><a href="#"><img src="${images}/i2.jpg" alt=""/>在微博上关注我们</a></li>
                    <li><a href="#"><img src="${images}/i3.jpg" alt=""/>在QQ上关注我们</a></li>
                </ul>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<div class="footer-bottom">
    <div class="container">
        <p>Copyright &copy; 2021.Company name MINE.More Software <a href="http://www.1127009780@qq.com/" target="_blank" title="fcx的Home">fcx的Home</a>.</p>
    </div>
</div>
</body>
</html>
